<template>
    <div class="main-box">
        <search-form @search="getDataList" @areaSearch="areaSearch" @exportPdf="exportPdf" @exportWord="exportWord"></search-form>
        <div id="exportId" v-if="searchType === 'report'">
            <div v-if="leverTableData.length">
                <div>
                    <div class="content" v-html="expertEvalSummary"></div>
                    <div class="title">一、评估基本情况</div>
                    <div class="content" v-html="expertEvalBaseinfo"></div>
                    <div class="title">二、畜牧业发展情况</div>
                    <div class="content" v-html="evalAnimalHusband"></div>
                </div>
                <div class="title">三、评估结论</div>
                <div class="title">（一）能力等级</div>
                <lever-table :tableData="leverTableData"></lever-table>
                <div class="title">（二）评估结果</div>
                <div>
                    <div class="content-item" v-html="expertEvalOverallReaults1"></div>
                    <div class="content-item" v-html="expertEvalOverallReaults2"></div>
                    <div class="content-item" v-html="expertEvalOverallReaults3"></div>
                    <div class="content-item" v-html="expertEvalOverallReaults4"></div>
                </div>
                <div>
                    <div class="title">四、主要短板</div>
                    <div class="content" v-html="expertLack"></div>
                    <div class="title">五、主要建议</div>
                    <div class="content" v-html="expertBiz"></div>
                </div>
                <div>
                    <div class="fj-tips">附件</div>
                    <div class="fj-title">兽医机构效能评估指标体系结果记录表</div>
                </div>
                <record-table :options="item" v-for="(item,index) of recordData" :key="index"></record-table>
            </div>
            <div id="empty" v-else>
                暂无数据
            </div>
            <div id="main" style="height: 500px;width: 100%;"></div>
        </div>
        <div id="exportId" v-if="searchType === 'area'">
            <div v-if="leverTableData.length">
                <div class="top-title">{{regin}}县数据填报</div>
                <div class="top-title">兽医机构效能自评情况</div>
                <div>
                    <div class="title">一、畜牧业发展情况</div>
                    <div class="content" v-html="evalAnimalHusband"></div>
                </div>
                <div>
                    <div class="title">二、自评结果</div>
                    <record-area :options="item" v-for="(item,index) of recordData" :key="index"></record-area>
                </div>
                <div>
                    <div class="title">三、区县整体自评意见</div>
                    <div class="content" v-html="reginEvalDesc"></div>
                </div>
            </div>
            <div id="empty" v-else>
                暂无数据
            </div>
        </div>
    </div>
</template>

<script>

import {partList} from '@/utils/data'
import {htmlToPdf} from '@/utils/print'
import LeverTable from '@/views/modules/report/lever-table.vue'
import RecordTable from '@/views/modules/report/record-table.vue'
import RecordArea from '@/views/modules/report/record-area.vue'
import SearchForm from '@/views/modules/report/search-form.vue'
import * as echarts from 'echarts'
import FileSaver from "file-saver";
import htmlDocx from "html-docx-js/dist/html-docx";
export default {
    components: {LeverTable,SearchForm,RecordTable,RecordArea},
    data () {
        return {
            searchType: "report",//报告查询
            evalYear : "",
            regin: "",
            reginId : "",
            partList : partList,
            yearsList : [],
            areaList : this.$store.state.user.area.area,
            targetList : [],
            leverTableData: [],
            evaluationDtlList: [],
            recordData: [],
            evalSummary: "",//概要信息
            evalBaseinfo: "",//基本信息
            expertEvalSummary: "",//概要
            expertEvalBaseinfo: "",//评估基本情况
            evalAnimalHusband: "",//畜牧业
            expertLack: "",//整体短板
            expertBiz: "",//整体建议
            reginEvalDesc: "",//区县自评意见

            expertEvalOverallReaults1: "",
            expertEvalOverallReaults2: "",
            expertEvalOverallReaults3: "",
            expertEvalOverallReaults4: "",
        }
    },
    mounted () {

    },
    methods: {
        exportPdf(){
            htmlToPdf(this.searchType === 'report' ? "能力等级" : "区县自评报告", '#exportId', "WNV风险评估系统")
        },
        /**导出data */
        exportWord() {
            let contentHtml = document.getElementById("exportId").innerHTML;
            let content = `
    	 	<!DOCTYPE html><html>
            	<head>
	                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	            </head>
	            <body>
	                <div>
                  		${contentHtml}
                	</div>
	            </body>
            </html>`;
            let converted = htmlDocx.asBlob(content);
            FileSaver.saveAs(converted, "西尼罗病毒(WNV)风险评估系统.docx");
        },
        getChartsDataList (params, done) {
            this.dataListLoading = true
            this.$http({
                url: this.$http.adornUrl('/admin/analysis/resultAvg'),
                method: 'post',
                params: this.$http.adornParams(
                    params
                )
            }).then(({data}) => {

                console.info('--------------')
                console.info(data)
                this.dataListLoading = false
                this.seriesData = data.seriesData
                console.info(this.seriesData)
                this.indicatorData = data.indicatorParams
                console.info(this.indicatorData)
                this.legendData = data.regionList
                console.info(this.legendData)
                var myChart = echarts.init(document.getElementById('main'))
                // 绘制图表
                myChart.setOption({
                    title: {
                        text: ''
                    },
                    legend: {
                        x: 'center', // 图例水平居中
                        y: 'bottom', // 图例垂直居上
                        data: this.legendData //['东城区', '门头沟区']
                    },
                    toolbox: {
                        show: true,
                        orient: 'vertical',
                        left: 'right',
                        top: 'top',
                        feature: {
                            saveAsImage: {show: true},  // 保存图表
                        },
                    },
                    radar: {
                        // shape: 'circle',
                        indicator: this.indicatorData
                        /****
             [
             { name: 'Sales', max: 6500 },
             { name: 'Administration', max: 16000 },
             { name: 'Information Technology', max: 30000 },
             { name: 'Customer Support', max: 38000 },
             { name: 'Development', max: 52000 },
             { name: 'Marketing', max: 25000 }
             ]*/
                    },
                    series: [
                        {
                            name: '区域对比分析图',
                            type: 'radar',
                            data: this.seriesData
                            /**[
               {
                            value: [4200, 3000, 20000, 35000, 50000, 18000],
                            name: '东城区'
                        },
               {
                            value: [5000, 14000, 28000, 26000, 42000, 21000],
                            name: '门头沟区'
                        }
               ]**/
                        }
                    ]
                })

                if (done) {
                    done()
                }
            })
        },
        // 获取区县+年度报告数据
        getDataList (param) {
            this.searchType = "report";
            this.evalYear = param.evalYear;
            this.reginId = param.reginId;
            this.regin = param.regin;

            this.$http({
                url: this.$http.adornUrl('/eval/getExpEvalAllInfo'),
                method: 'post',
                data: this.$http.adornData(
                    {
                        reginId: param.reginId,
                        evalYear: param.evalYear
                    }
                )
            }).then(({
                data
            }) => {
                // console.log('🚀 ~ data', data)
                this.setLeverTableData(data);
                console.log('🚀 ~#### param',param)
                this.getChartsDataList({
                    regionId: param.reginId,
                    region: param.regin,
                    evalYear: param.evalYear,
                    userId: 1
                });
            })
        },
        areaSearch(param){
            this.searchType = "area";
            this.evalYear = param.evalYear;
            this.reginId = param.reginId;
            this.regin = param.regin;

            this.$http({
                url: this.$http.adornUrl('/eval/getExpEvalAllInfo'),
                method: 'post',
                data: this.$http.adornData(
                    {
                        reginId: param.reginId,
                        evalYear: param.evalYear
                    }
                )
            }).then(({
                data
            }) => {
                // console.log('🚀 ~ data', data)
                this.setLeverTableData(data);
                console.log('🚀 ~#### param',param)

            })
        },
        // 获取所有的指标
        getTargetDataList () {
            return new Promise((resolve) => {
                this.$http({
                    url: this.$http.adornUrl('/admin/basIndex/page'),
                    method: 'get',
                    params: this.$http.adornParams(Object.assign({
                        current: 1,
                        size: 1000
                    }, {
                    reginId: this.reginId,
                    estimateYear: this.evalYear}))
                }).then(({
                    data
                }) => {
                    resolve(data.records);
                })
            })
        },
        // 页面主逻辑方法
        async setLeverTableData(data){
            this.leverTableData = [];
            this.targetList = await this.getTargetDataList();
            if(!data.length){
                this.$alert("对不起，没有查询到相关信息！","友情提醒");
                return;
            }
            let reportObj = data[0];
            this.evaluationDtlList = reportObj.evaluationDtlList;
            let indexList = reportObj.indexList;
            this.recordData = [];
            this.evaluationDtlList.forEach((eva) => {
                let findObj = indexList.find((obj) => {
                    return obj.indexId === eva.indexId
                })
                // console.log('🚀 ~ findObj', findObj)
                this.recordData.push({
                    eva: eva,
                    base : findObj,
                    indexCode : findObj.indexCode
                })

            })
            this.recordData = this.recordData.sort(wfy.sortBy('indexCode'))
            console.log('🚀 ~ this.recordData', this.recordData)
            this.evalSummary = wfy.empty(reportObj.evaluationMainBiz.evalSummary) ? "" : reportObj.evaluationMainBiz.evalSummary.replace(/\n/g, "<br/>");//概要信息
            this.evalBaseinfo = wfy.empty(reportObj.evaluationMainBiz.evalBaseinfo) ? "" : reportObj.evaluationMainBiz.evalBaseinfo.replace(/\n/g, "<br/>");//基本信息

            this.expertEvalSummary = wfy.empty(reportObj.evaluationMainBizExpert.expertEvalSummary) ? "" : reportObj.evaluationMainBizExpert.expertEvalSummary.replace(/\n/g, "<br/>");//概要
            this.expertEvalBaseinfo = wfy.empty(reportObj.evaluationMainBizExpert.expertEvalBaseinfo) ? "" : reportObj.evaluationMainBizExpert.expertEvalBaseinfo.replace(/\n/g, "<br/>");//基本信息
            this.evalAnimalHusband = wfy.empty(reportObj.evaluationMainBiz.evalAnimalHusband) ? "" : reportObj.evaluationMainBiz.evalAnimalHusband.replace(/\n/g, "<br/>");//畜牧业
            this.expertEvalOverallReaults1 = (!wfy.empty(reportObj.mainResult1Expert) && !wfy.empty(reportObj.mainResult1Expert.expertEvalOverallReaults1)) ? reportObj.mainResult1Expert.expertEvalOverallReaults1.replace(/\n/g, "<br/>") : "";
            this.expertEvalOverallReaults2 = (!wfy.empty(reportObj.mainResult2Expert) && !wfy.empty(reportObj.mainResult2Expert.expertEvalOverallReaults2)) ? reportObj.mainResult2Expert.expertEvalOverallReaults2.replace(/\n/g, "<br/>") : "";
            this.expertEvalOverallReaults3 = (!wfy.empty(reportObj.mainResult3Expert) && !wfy.empty(reportObj.mainResult3Expert.expertEvalOverallReaults3)) ? reportObj.mainResult3Expert.expertEvalOverallReaults3.replace(/\n/g, "<br/>") : "";
            this.expertEvalOverallReaults4 = (!wfy.empty(reportObj.mainResult4Expert) && !wfy.empty(reportObj.mainResult4Expert.expertEvalOverallReaults4)) ? reportObj.mainResult4Expert.expertEvalOverallReaults4.replace(/\n/g, "<br/>") : "";
            this.expertLack = wfy.empty(reportObj.evaluationMain.expertLack) ? "" : reportObj.evaluationMain.expertLack.replace(/\n/g, "<br/>");
            this.expertBiz = wfy.empty(reportObj.evaluationMain.expertBiz) ? "" : reportObj.evaluationMain.expertBiz.replace(/\n/g, "<br/>");
            this.reginEvalDesc = wfy.empty(reportObj.evaluationMain.reginEvalDesc) ? "" : reportObj.evaluationMain.reginEvalDesc.replace(/\n/g, "<br/>");

            console.log('🚀 ~ this.targetList', this.targetList);
            // 先取到一级指标
            this.targetList.forEach((item) => {
                if(item.biz1 === "1"){
                    // 先把章节放上。 不设置三级结构，将章节作为与一级指标一样的级别
                    let part = this.partList.find((part) => {
                        return part.value === item.opertinMode
                    })
                    let expart = this.leverTableData.filter((data) => {
                        return data.opertinMode === item.opertinMode
                    })
                    // 不存在该章节标题，再放入
                    if(!expart.length){
                        this.leverTableData.push({
                            opertinMode : item.opertinMode,
                            indexDesc : part.label,
                            partFlag : true
                        })
                    }
                    this.leverTableData.push(item);
                }
            })
            // 取到各一级指标下的二级指标
            this.leverTableData.forEach((parent) => {
                parent.children = this.targetList.filter((child) => {
                    return child.biz2 === parent.indexId
                });
            })
            this.leverTableData.forEach((item) => {
                let scoreObj = this.evaluationDtlList.find((score) => {
                    return score.indexId === item.indexId
                })
                if(!wfy.empty(scoreObj)){
                    item.expertEvalScore = scoreObj.expertEvalScore;
                    item.reginEvalScore = scoreObj.reginEvalScore;
                }
                item.indexDesc = !wfy.empty(item.indexCode) ? item.indexCode + "  " + item.indexDesc : item.indexDesc;
                item.children.forEach((child) => {
                    let childScoreObj = this.evaluationDtlList.find((score) => {
                        return score.indexId === child.indexId
                    })
                    if(!wfy.empty(childScoreObj)){
                        child.expertEvalScore = childScoreObj.expertEvalScore;
                        child.reginEvalScore = childScoreObj.reginEvalScore;
                    }
                    child.indexDesc = child.indexCode + "  " + child.indexDesc;
                })
            })
            console.log('🚀 ~ this.leverTableData', this.leverTableData)
        }
    }
}
</script>

<style lang="scss" scoped>
    .title{
        font-size: 26px;
        font-weight: bold;
        line-height: 80px;
    }
    .top-title{
        font-size: 30px;
        font-weight: bold;
        line-height: 60px;
        text-align: center;
    }
    .content{
        font-size: 18px;
        line-height: 30px;
    }
    .content-item{
        font-size: 18px;
        line-height: 40px;
        margin-bottom: 10px;
    }
    #exportId{
        width: 1000px;
    }
    #empty{
        height: 500px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #303133;
    }
    .fj-tips{
        height: 40px;
        display: flex;
        align-items: center;
        font-size: 20px;
        font-weight: bold;
        margin-top: 40px;
    }
    .fj-title{
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        font-size: 20px;
    }
</style>
